<template>
  <!-- 搜索框组件 -->
  <div class="inpButton">
    <div class="Text">
      <el-input type="text" placeholder="请输入内容" v-model="searchValue" />
    </div>
    <div class="btn">
      <ButtonAssembly msg="点击搜索" @control="clickButton">
        <template #button></template>
      </ButtonAssembly>
    </div>
  </div>
</template>

<script setup lang="ts">
import ButtonAssembly from './ButtonAssembly.vue'
import { ref, defineEmits } from 'vue'

const searchValue = ref('')

const emits = defineEmits(['controls', 'emptyInput'])

const clickButton = () => {
  if (!searchValue.value) {
    emits('emptyInput')
  } else {
    emits('controls', searchValue.value)
  }
}
</script>

<style src="./css/SearchComponent.scss" scoped></style>
